<template>
  <div class="wrapper" :class="{ fadeOut: !fadeIn }">
    <div class="bg"></div>

    <div class="card">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  fadeIn: boolean
}>()
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;

  .bg {
    width: 100vw;
    height: 100vw;
    position: absolute;
    top: 0;
    left: 0;

    background-color: var(--gray);
  }
}
</style>
